<template>
  <div class="app-box">
    <el-row>
      <div class="back-box"></div>
    </el-row>

    <!--    <el-row class="app-item-contain" style="margin-top: 10px">-->
    <!--      <h3 class="index-title-h3" style="border-left: solid 5px #3651d4;background-color: white" @click="pastExam">-->
    <!--        往期考试</h3>-->
    <!--      &lt;!&ndash;试卷列表&ndash;&gt;-->

    <!--    </el-row>-->
    <!--    <el-row class="app-item-contain" style="margin-top: 10px">-->
    <!--      <h3 class="index-title-h3" style="border-left: solid 5px #3651d4;background-color: white" @click="gopaperInfo">-->
    <!--        考试中心</h3>-->
    <!--    </el-row>-->
    <!--    存放盒子-->

    <div class="content-box">
      <!--      <div style="display: flex;justify-content: space-around;margin-bottom: 15px">-->
      <!--        <div class="line-box" @click="pastExam" style="width: 150px;;background-color: #2ce8b4;text-align: center;color: white;font-weight: 700">-->
      <!--          往期考试-->
      <!--        </div>-->
      <!--        <div class="line-box" @click="gopaperInfo" style="width: 150px;background-color: rgb(62,200,224);text-align: center;color: white;font-weight: 700">-->
      <!--          考试中心-->
      <!--        </div>-->
      <!--      </div>-->
      <!--左-->
      <div style="width: 50%;height: 100%;" >
        <div class="radio-box" style="background-color: rgb(100,182,229);height: 100%;line-height: 210px" @click="gotrainingPage ">
          培训资料
        </div>
      </div>
      <!--      右-->
      <div style="width: 50%;margin-left: 10px">
        <div  class="radio-box little-box" style="background-color: rgb(93,209,234);margin-bottom: 10px" @click="gopaperInfo">考试中心</div>
        <div  class="radio-box little-box" style="background-color: rgb(116,163,214)"  @click="pastExam">往期考试</div>
      </div>
    </div>

  </div>
</template>
<script>

export default {
  name: "indexPage",
  data() {
    return {
      paperList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  created() {
  },
  methods: {
    //往期考试入口
    pastExam() {
      this.$router.push({
        path: '/pastExam'
      })
    },
    gopaperInfo() {
      this.$router.push({
        path: '/paperInfo'
      })
    },
    gotrainingPage(){
      this.$router.push({
        path: '/tranPage'
      })
    }
  },

}
</script>
<style scoped lang="scss">
.app-box {
  height: 100vh;
  //background-color: rgb(239, 243, 247)
  background-color: #eff3f7;
}

.line-box {
  height: 150px;
  line-height: 150px;
}
.radio-box{
  border-radius: 5px;
}
.little-box{
  height: 100px;
  line-height: 100px;
}
.back-box {
  height: 200px;
  border-radius: 0 0 5px 5px;
  //background-image: url("https://www.mindskip.net:7004/static/home/title.png");
  background-image: url("@/assets/banner/banner2.png");
  background-size: cover;
}

.content-box {
  color: white;
  font-weight: 700;
  text-align: center;
  display: flex;
  padding-top: 10px;
  justify-content: space-between;
  height: 210px;
  //background-image: url("@/assets/banner/banner1.png");
  //background-size: cover;
  //height: 100%;
}

//.back-box1 {
//  height: 200px;
//  border-radius: 0 0 5px 5px;
//  background-image: url("@/assets/banner/banner1.png");
//  background-size: cover;
//}
//.back-box2 {
//  height: 200px;
//  border-radius: 0 0 5px 5px;
//  background-image: url("@/assets/banner/banner2.png");
//  background-size: cover;
//}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.app-item-contain {
  //margin-top: 10px;
  background-color: white;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.index-title-h3 {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.go-box {
  color: rgb(134, 206, 97) !important;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 50%;
  height: 80%;
  display: block;
  margin: 20px auto 10px auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.carousel-img {
  display: inline-block;
  height: 300px;
  width: 100%;
}

.test-paper {
  margin-bottom: 50px;
}

.test-paper-item {
  border-top: 1px solid #999999;
  background: #fff;
  padding: 10px;
  margin-bottom: 1px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;

  div {
    line-height: 1.8;
  }
}

.test-des {
  color: #909399;
  font-size: 13px;
}

.test-time {
  padding: 0 2px;
  color: #f37b1d;
  background-color: #eff3f7;
  font-size: 14px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  word-wrap: break-word;
  word-break: break-all;
  align-items: center;
}

h3 {
  margin: 0;
}
</style>
